<template>
  <div id="photo">
    <div class="photo-main">
      <div class="title">
        <HomeTitle title="图片审核" Eng="Photot Checked" />
      </div>
      <div class="content">
        <div class="btns">
          <el-button
            :disabled="photo.select.length == 0"
            type="primary"
            @click="pass"
            >审核通过</el-button
          >
          <el-button
            :disabled="photo.select.length == 0"
            type="danger"
            @click="unpass"
            >审核不通过</el-button
          >
        </div>
        <myLoading v-if="loading" />
        <el-table
          :data="photo.list"
          header-cell-class-name="tableColor" cell-class-name="tableColor"
          v-else
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="80"
            :index="calcIndex"
          ></el-table-column>
          <el-table-column label="上传时间" prop="UploadTime" width="180">
            <template #default="s">
              {{ moment(s.row.UploadTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column
            label="图片名称"
            prop="PictureName"
            width="120"
          ></el-table-column>
          <el-table-column
            label="图片主题"
            prop="ThemeName"
            width="80"
          ></el-table-column>
          <el-table-column
            label="图片尺寸"
            prop="Pixel"
            width="120"
          ></el-table-column>
          <el-table-column label="图片大小" prop="ThumbnailsLength" width="120">
            <template #default="s">
              {{ getSize(s.row.ThumbnailsLength) }}
            </template>
          </el-table-column>
          <el-table-column
            label="图片标签"
            width="200"
            prop="CustomizingTag"
          ></el-table-column>
          <el-table-column label="图片预览">
            <template #default="s">
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 150px;
                  height: 150px;
                "
              >
                <el-image
                preview-teleported
                  :src="baseApi + s.row.WatermarkFileUrl"
                  :preview-src-list="[baseApi + s.row.WatermarkFileUrl]"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="上传人"
            prop="UploadUserName"
          ></el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination
          v-model:currentPage="params.PageIndex"
          :page-size="params.PageSize"
          :small="true"
          :background="true"
          layout=" prev, pager, next"
          :total="photo.count"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import HomeTitle from "@/components/title.vue";
import * as PhotoApi from "@/api/photo";
import { storeUser } from "@/store/user";
import moment from "moment";
import { ElNotification } from "element-plus";
export default {
  name: "",
  components: {
    HomeTitle,
  },
  setup(props, ctx) {
    const loading = ref(false);
    const user = storeUser();
    const photo = reactive({
      list: [{}],
      select: [],
      count: 0,
    });
    const params = reactive({
      CurrentUserAccount: "",
      queryPictureName: "",
      queryDepartmentID: "",
      queryTag: "",
      PageSize: "10",
      PageIndex: "1",
    });
    const init = async () => {
      photo.select =[]
      params.CurrentUserAccount = user.UserAccount;
      loading.value = true;
      let { data } = await PhotoApi.getList(params);
      photo.count = data.UserData.Count;
      photo.list = data.UserData.PictureList;
      loading.value = false;
    };
    onMounted(() => {
      init();
    });
    const handleCurrentChange = (v) => {
      photo.select = [];
      params.PageIndex = v;
      init();
    };
    const handleSelectionChange = (v) => {
      photo.select = v;
    };
    const getSize = (v) => {
      if (v < 1024) {
        return v + "b";
      } else if (v > 1024 && v < 1024 * 1024) {
        return (v / 1024).toFixed(2) + "kb";
      } else if (v > 1024 * 1024) {
        return (v / 1024 / 1024).toFixed(2) + "m";
      }
    };
    const pass = async () => {
      let { data } = await PhotoApi.check({
        CurrentUserAccount: user.UserAccount,
        PictureIDs: photo.select.map((v) => v.PictureID).join(","),
        is_checked: 1,
      });
      if (data.Status != 0) return;
      ElNotification({
        type: "success",
        title: "审核通过",
        message: "操作成功!",
      });
      init();
    };
    const unpass = async () => {
      let { data } = await PhotoApi.check({
        CurrentUserAccount: user.UserAccount,
        PictureIDs: photo.select.map((v) => v.PictureID).join(","),
        is_checked: 0,
      });
      if (data.Status != 0) return;
      ElNotification({
        type: "error",
        title: "审核不通过",
        message: "操作成功!",
      });
      init();
    };
    const calcIndex = (index) => {
      return (params.PageIndex - 1) * params.PageSize + index + 1;
    };
    return {
      photo,
      loading,
      handleCurrentChange,
      params,
      handleSelectionChange,
      moment,
      getSize,
      pass,
      unpass,
      calcIndex,
    };
  },
};
</script>

<style scoped lang="scss">
::v-deep(.el-table) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table tr) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table__cell) {
  background: transparent !important;
  color: #fff !important;
}
::v-deep(.el-table__body-wrapper) {
  height: 100%;
}
::v-deep(.el-table__inner-wrapper) {
  height: 100%;
}
#photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  overflow-y: auto;
  background: var(--box-bg-color);

  .photo-main {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    .title {
      margin-bottom: 20px;
    }
    .content {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .el-table {
        flex: 1;
      }
    }
    .footer {
      margin-top: 20px;
      // text-align: right;
      align-self: flex-end;
    }
  }
}
</style>
